<template>
    <div class="pet-profile">
      <el-form :model="pet" label-width="120px">
        <el-form-item label="宠物名称">
          <el-input v-model="pet.name"></el-input>
        </el-form-item>
        <el-form-item label="宠物种类">
          <el-input v-model="pet.type"></el-input>
        </el-form-item>
        <el-form-item label="喜好">
          <el-input v-model="pet.likes"></el-input>
        </el-form-item>
        <el-form-item label="宠物性别">
          <el-select v-model="pet.gender" placeholder="请选择">
            <el-option label="女宝宝" value="female"></el-option>
            <el-option label="男宝宝" value="male"></el-option>
            <el-option label="不愿透露" value="undisclosed"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宠物出生日期">
          <el-date-picker v-model="pet.birthdate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="宠物照片">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/" 
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="相处细节">
          <el-input type="textarea" v-model="pet.details"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="savePet">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    name: 'PetProfile',
    data() {
      return {
        pet: {
          name: '',
          type: '',
          likes: '',
          gender: '',
          birthdate: '',
          photo: '',
          details: ''
        }
      };
    },
    methods: {
      savePet() {
        console.log('保存宠物信息:', this.pet);
      },
      handlePreview(file) {
        console.log('Preview:', file);
      },
      handleRemove(file, fileList) {
        console.log('Remove file:', file, fileList);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`最多只能上传3张图片，你已经上传了${fileList.length}个文件！`);
      }
    }
  };
  </script>
  
  <style scoped>
  .pet-profile {
    margin: 20px;
  }
  .upload-demo .el-upload__tip {
    font-size: 12px;
    color: #999999;
  }
  </style>
  